<template>
  <view class="page">
    <view class="top_btn">
      <view class="wrap" @click="toggleBack">
        <image class="icon" src="/static/icon/toggle.png" mode="aspectFill"></image>
        <view class="text">切换至商户</view>
      </view>
    </view>

    <div class="list">
      <template v-for="item in pageData">
        <brandItem :selectId="selectId" :data="item" @click="brandItemClick" />
      </template>
    </div>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { onShow, onLoad } from '@dcloudio/uni-app';
  import { brandItem } from '@/components/brandItem/brandItem.vue';
  import { queryMerchant } from '../../apis/pages';

  const selectId = ref(-1);
  const testData = [
    {
      id: 1,
      name: '肯德基',
      children: [
        {
          parentId: 1,
          id: 2,
          name: '肯德基(航天城店)',
        },
        {
          parentId: 1,
          id: 3,
          name: '肯德基(北湖公园店)',
        },
        {
          parentId: 1,
          id: 4,
          name: '肯德基(吴宇路店)',
        },
        // {
        //   parentId: 1,
        //   id: 99,
        //   name: '肯德基(吴宇路店)',
        // },
        // {
        //   parentId: 1,
        //   id: 98,
        //   name: '肯德基(吴宇路店)',
        // },
      ],
    },
    {
      id: 5,
      name: '星巴克',
      children: [
        {
          parentId: 2,
          id: 6,
          name: '星巴克(航天城店)',
        },
        {
          parentId: 2,
          id: 7,
          name: '星巴克(北湖公园店)',
        },
        {
          parentId: 2,
          id: 8,
          name: '星巴克(吴宇路店)',
        },
      ],
    },
  ];

  const pageData = ref();

  onLoad(() => {
    getPageData();
  });

  function getPageData() {
    // 获取页面数据
    queryMerchant({
      id: uni.getStorageSync('merchantId'),
    }).then((res) => {
      console.log(res, 'res >>>>>>');
      pageData.value = res.data;
    });
  }

  function brandItemClick(id) {
    console.log('brand Item Click >>>>', id);
    selectId.value = id;
  }

  // 切换回商户
  function toggleBack() {
    selectId.value = -1;
  }
</script>

<style scoped lang="scss">
  .page {
    width: 100vw;
    min-height: 100vh;
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    background-color: #f0f0f0;
  }

  .content {
    background-color: #fff;
    padding: 20rpx;
    border-radius: 16rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
  }

  .top_btn {
    text-align: right;
    margin-bottom: 20rpx;
    .wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      .icon {
        width: 28rpx;
        height: 25rpx;
        vertical-align: middle;
        margin-right: 8rpx;
      }

      .text {
        font-size: 24rpx;
        color: #016bec;
      }
    }
  }
</style>
